<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数据展示</title>
    <!-- 假设 vue.js 文件路径正确 -->
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 直接展示 fruits 数组的前三个元素 -->
        {{fruits[0]}}  {{fruits[1]}}  {{fruits[2]}}
        <!-- 使用 v-for 指令遍历 fruits 数组 -->
        <h1 v-for='(item, index) in fruits' :key="index">
            第{{index + 1}}种水果：{{item}}
        </h1>
        <!-- 直接展示 list 数组的前三个元素 -->
        {{list[0]}}  {{list[1]}}  {{list[2]}}
        <!-- 使用 v-for 指令遍历 list 数组 -->
        <h1 v-for='(item, index) in list' :key="index">
            第{{index + 1}}项任务：{{item}}
        </h1>
        <!-- 使用 v-for 指令生成 0 到 10 的数字 -->
        <h1 v-for="i in 11">
            {{i - 1}}
        </h1>
        <!-- 使用 v-for 指令遍历 student 对象 -->
        <h1 v-for="(value, key) in student">
            {{key}}:{{value}}
        </h1>
        <!-- 使用 v-for 指令遍历 goods 数组 -->
        <ul>
			<li v-for="(item, index) in goods" :key="index">
			    商品名称：{{item.title}}，价格：{{item.price}}
			</li>
		</ul>
        <!-- 展示二维数组 table -->
        <h2>二维数组 table 的内容：</h2>
        <table border="1">
            <tr v-for="(row, rowIndex) in table" :key="rowIndex">
                <td v-for="(cell, colIndex) in row" :key="colIndex">
                    {{cell}}
                </td>
            </tr>
        </table>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    fruits: ['苹果', '香蕉', '梨'],
                    // 定义 list 数组
                    list: ['吃饭', '睡觉', '学习'],
                    student: {
                        name: "郝鹏翔",
                        cls: '软技2306'
                    },
                    goods: [
                        {
                            title: '华为手机',
                            price: 1999
                        },
                        {
                            // 修正拼写错误
                            title: '小米手机',
                            price: 1888
                        }
                    ],
                    table: [
                        [1, 2, 4, 1, 0, 0],
                        [1, 2, 4, 2, 1, 1],
                        [1, 1, 5, 1, 0, 0]
                    ]
                };
            }
        }).mount("#app");
    </script>
</body>

</html>